.gobang-chessboard {
  .chess {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    transition: all 0.15s ease-out;

    &.black {
      background-color: #1a1a1a;
      background: radial-gradient(circle, #333, #000);
    }

    &.white {
      background-color:#fff;
      background: radial-gradient(circle, #fff, #f1f1f1);
    }

    &.appear {
      opacity: 1;
    }

    &.marked {
      &::after {
        content: "";
        width: 38%;
        height: 38%;
        max-width: 14px;
        max-height: 14px;
        border-radius: 100%;
      }

      &.black {
        &::after {
          background-color:#fff;
        }
      }

      &.white {
        &::after {
          background-color:#111;
        }
      }
    }

    &.highlight {
      box-shadow: 0px 0px 0px 2px #ffeb3b;
      animation: fade-out 0.5s ease 1;
    }
  }
}

@keyframes fade-out {
  100% {
    opacity: 0;
  }
}
